<template>
	<view class="box">
		<view class="top">
			<view class="inu">
				<view class="" style="display: flex;">
					<uni-icons type="search" size="22"></uni-icons>
					<input class="uni-input" placeholder="输入门店名字" v-model="params.keyWord" @input="clearInput" />
				</view>
				<uni-icons type="clear" size="24" v-if="showClearIcon" @click="clearIcon"></uni-icons>
			</view>
		</view>
		<view class="hezi" v-for="(item,index) in orderlist" :key="index">
			<view class="heizi_top ding">
				<span>下单时间:{{item.createTime}}</span>
				<p v-if="item.deliveryStatus == 0">未发货</p>
				<p v-else style="color: green;">已发货</p>
			</view>
			<view class="neir">
				<view class="left">
					<span>{{item.productName}}</span>
					<p><a>下单数量:{{item.productCount}}</a><a>下单金额:￥{{item.totalAmount}}</a></p>
				</view>
				<view class="right" v-if="item.deliveryStatus == 0" @click="set(item)">
					<button>修改</button>
				</view>
			</view>
			<view class="hezi1">
				<image src="../../static/gimg/m3.png" mode=""></image>
				<span>{{item.shopName}}: {{item.shopPerson}},{{item.shopPhone}}</span>
			</view>
			<view class="hezi1">
				<image src="../../static/ddimg/d4.png" mode=""></image>
				<span>{{item.deliveryRecipientName}},{{item.deliveryRecipientPhone}}</br>
					{{item.deliveryProvince}}{{item.deliveryCity}}{{item.deliveryCounty}}
					{{item.deliveryAddress}}</span>
			</view>
		</view>
		<view class="kong" v-if="orderlist.length == ''">
			<image class="img" src="@/static/tabbar/kong.png" mode=""></image>
			<view class="text">
				暂无数据
			</view>
		</view>
		<view class="" style="height: 100rpx;">
			
		</view>

	</view>
</template>
<script>
	import {
		getorderlist
	} from '../../common/http.api.js'
	import { throttling, chattering } from '@/common/cont.js'
	export default {
		data() {
			return {
				orderlist: [],
				params: {
					pageNum: 1,
					pageSize: 5
				},
				showClearIcon:false
			}
		},
		onShow() {
			this.orderlist = []
			getorderlist(this.params).then(res => {
				if (res.code == 200) {
					this.orderlist.push(...res.rows)
				}
			})
		},
		methods: {
			set(item){
				uni.navigateTo({
					url:`/pages/dier/setorder?item=${encodeURIComponent(JSON.stringify(item))}`,
				})
			},
			resout(){
				this.orderlist = []
				this.params.pageNum = 1
				this.params.pageSize = 5
			},
			clearInput: function(event) {
				this.resout()
				this.params.keyWord = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
					chattering(()=>{
						this.getlist()
					},500)
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon(){
				this.resout()
				this.params.keyWord = ''
				this.showClearIcon = false;
				this.getlist()
			},
			onReachBottom(){
				this.params.pageNum ++ 
				this.getlist()
			},
			getlist() {
				getorderlist(this.params).then(res => {
					if (res.code == 200) {
						this.orderlist.push(...res.rows)
					}
				})
			},
			xiu() {
				uni.navigateTo({
					url: '/pages/geren/xiupass'
				})
			},
			dingdan() {
				uni.navigateTo({
					url: '/pages/dier/xiadanjilu'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hezi1 {
		width: 626rpx;
		background: #FAF5E9;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 23rpx;
		color: #BC7E13;
		line-height: 33rpx;

		image {
			width: 35rpx;
			height: 35rpx;
			margin-right: 10rpx;
		}
	}

	.hezi {
		width: 660rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 20rpx;

		.neir {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 15rpx;

			.left {
				span {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #141414;
				}

				p {
					margin-top: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #777777;
				}

				a {
					margin-right: 20rpx;
				}
			}

			.right {
				button {
					width: 129rpx;
					height: 54rpx;
					background: linear-gradient(42deg, #5A4629 0%, #21150A 53%, #302315 100%);
					border-radius: 27rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #E4C085;
				}
			}
		}

		.heizi_top {
			width: 100%;
			height: 50rpx;
			padding-bottom: 10rpx;
			border-bottom: 1px solid #eeeeee;

			span {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #999999;
			}

			p {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #BCBCBC;
			}
		}
	}

	.ding {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.inu {
		display: flex;
		width: 650rpx;
		height: 70rpx;
		background: #fff;
		border-radius: 35rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		input {
			width: 540rpx;
			margin-left: 20rpx;
		}
	}
	
</style>